<template>
  <!-- 顶部 -->
  <a-layout-header
    style="background: #fff; padding: 0"
    class="header-container"
  >
    <!-- 左侧-侧边栏开关 -->
    <menu-unfold-outlined
      v-if="collapsed"
      class="trigger"
      @click="handleEmitCollapsed"
    />
    <menu-fold-outlined v-else class="trigger" @click="handleEmitCollapsed" />

    <!-- 右侧-用户信息和退出登录 -->
    <a-dropdown :trigger="['click']" class="header-dropdown">
      <a class="ant-dropdown-link" @click.prevent>
        <a-avatar size="large" :src="userInfo.avatar || defaultAvatar" />
        <span class="userName">{{
          userInfo.accountName || userInfoStorage.accountName
        }}</span>
        <DownOutlined />
      </a>
      <template #overlay>
        <a-menu>
          <a-menu-divider />
          <a-menu-item key="1">
            <LoginOutlined />
            <span class="logout" style="margin-left: 12px" @click="handleLogout"
              >退出登录</span
            >
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-layout-header>
</template>

<script setup lang="ts">
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DownOutlined,
  LoginOutlined
} from "@ant-design/icons-vue";
import defaultAvatar from "../../../public/img/defaultAvatar.gif";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
import { message } from "ant-design-vue";
// 定义参数接口
interface Props {
  // 左侧菜单是否折叠
  collapsed: boolean;
}
// 定义触发事件接口
interface Emits {
  // 改变collapsed状态
  (event: "handleCollapsed", collapse: boolean): void;
}
const emits = defineEmits<Emits>();
const props = defineProps<Props>();
// 实例化user数据仓库
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const userInfoStorage = JSON.parse(sessionStorage.getItem("userInfo"));
// 触发-改变collapsed事件
const handleEmitCollapsed = () => {
  emits("handleCollapsed", props.collapsed);
};
// 处理-用户退出登录
const handleLogout = () => {
  // 清空localStorage
  sessionStorage.clear();
  message.success("退出登录成功，即将跳转到登录页面");
  setTimeout(() => {
    // 刷新跳转
    window.location.href = "/user/login";
  }, 1500);
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
